<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../../common/taglibs.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>阿金美业</title>
<link rel="stylesheet" type="text/css" href="${ctx }/resource/css/reset.css">
<link rel="stylesheet" type="text/css" href="${ctx }/resource/css/style.css">
<script type="text/javascript"  src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="${ctx }/resource/js/lib/rem.js"></script>
<script type="text/javascript" src="${ctx }/resource/js/lib/jquery-3.3.1.js"></script>
<style type="text/css">
.RadioStyle input {
	display: none
	}
.RadioStyle label {
	border: 1px solid #00a4ff;
	padding: 2px 10px 2px 5px;
	min-width: 80px;
	text-align: center;
	float: left;
	margin: 2px;
	border-radius: 4px
	}
.RadioStyle input:checked + label {
	/* background: url(images/ico_checkon.svg) no-repeat right bottom; */
	background-size: 21px 21px;
	color: #00a4ff
	}
</style>
</head>
<script type="text/javascript">
wx.config({
    beta: false,// 必须这么写，否则在微信插件有些jsapi会有问题
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '${objMap.appId}',
    timestamp: '${objMap.timestamp}',
    nonceStr: '${objMap.nonceStr}',
    signature: '${objMap.signature}',
    jsApiList: [ 'checkJsApi', 'onMenuShareAppMessage',
        'onMenuShareWechat', 'startRecord', 'stopRecord',
        'onVoiceRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice',
        'uploadVoice', 'downloadVoice', 'chooseImage',
        'previewImage', 'uploadImage', 'downloadImage',
        'getNetworkType', 'openLocation', 'getLocation',
        'hideOptionMenu', 'showOptionMenu', 'hideMenuItems',
        'showMenuItems', 'hideAllNonBaseMenuItem',
        'showAllNonBaseMenuItem', 'closeWindow', 'scanQRCode',
        'previewFile', 'openEnterpriseChat',
        'selectEnterpriseContact','chooseInvoice'
        ]// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
var images = {
		localId : [],
		serverId : []
};
function selectImg(){
	//2.2.1拍照或从手机相册中选图
	wx.chooseImage({
		count: 1,
		sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
		success : function(res) {
			images.localId = images.localId.concat(res.localIds);
			var sliderImg ="<img id='imgPath' style=' width: 2.4rem; height: 3.3rem;' src='"+images.localId+"'>";	
			$("#savePhto").append(sliderImg);
			$("#addphto").hide();
			$("#savePhto").show();
		}
	});
}
function toSavePic(vipid){
	var name = $("#name").val();	
	var sex = $(":radio[name=sex]:checked").val();
	var age=$("#age").val();
	$.post("createUserAjax",{name:name,sex:sex,age:age,openId:'${user.openId}'},function(data){
		upload(data);
	});
}

function upload(id) {
	wx.uploadImage({
		localId : images.localId[0],
		success : function(res) {
			images.serverId.push(res.serverId);
			console.log(images);
				$.ajax({
					type : "POST",
					url : "downLodeImage",
					traditional:true,
					data : {
						serverId :images.serverId,vipId:id
					},
					dataType : "text",
					success : function(data) {
						if(data=='success'){
							window.location.href="oauth?type=toVipCentent";
						}
					}
				});
		},
		fail : function(res) {
		}
	});
}
</script>
<body>
  <section class="aui-flexView">
    <section class="aui-scrollView">
        <div class="aui-datum-box">
            <div class="aui-datum-box-img">
            	<div class="bg" style="background-image: url(${user.headimgurl })">
              </div>
            </div>
            <h2>${user.nickname }<em><img src="${ctx }/resource/img/icon-bu-008.png" alt=""></em></h2>
        </div>
       <div class="aui-datum-list dat-list-wrap">
           <div class="aui-flex">
              <div class="aui-datum-icon">
                 <img src="${ctx }/resource/img/icon-bu-005.png" alt="">
              </div>
              <div class="aui-flex-box b-line">
                <input id="name" type="text" name="name" placeholder="姓名" value="${vip.name }">
              </div>
           </div>    
            <div class="aui-flex">
              <div class="aui-datum-icon">
                 <img src="${ctx }/resource/img/icon/sex-reset.png" alt="">
              </div>
              <div class="aui-flex-box b-line RadioStyle">
                <%-- <input type="text" name="" placeholder="性别" value="${vip.sex==0?女:男 }"> --%>
                 	<input type="radio" <c:if test="${vip.sex==1 }">checked="checked"</c:if>  name="sex" value="1" id="model1" />
		        	<label for="model1">男</label>
		        	<input type="radio" <c:if test="${vip.sex==0 }">checked="checked"</c:if> name="sex" value="0" id="model2" />
		        	<label for="model2">女</label>
              </div>
           </div>     
           <div class="aui-flex">
              <div class="aui-datum-icon">
                 <img src="${ctx }/resource/img/icon/age-reset.png" alt="">
              </div>
              <div class="aui-flex-box b-line">
                <input type="text" id="age" name="age" placeholder="年龄" value="${vip.age }">
              </div>
           </div>
           <div class="inner-put pic-up flex">
             <label>上传照片:</label>
             <div  id="addphto" class="pic-upload"  onclick="selectImg();"></div>
             <div  id="savePhto" class="pic-upload" style="display: none;"></div>
           </div>
           <a href="javaScript:;" onclick="toSavePic(${vip.id});" class="pay-btn">保存信息</a>
       </div>
    </section>
</section>
</body>
</html>